<template>
  <div>
    <h1>App根组件</h1>

    <hr>


    <todo-input @add="onAddNewTask"></todo-input>
    <todo-list :list="taskList" class="mt-2"></todo-list>
    <todo-button v-model:active="activeBtnIndex" ></todo-button>
  </div>
</template>

<script>
import TodoList from './components/TodoList/TodoList.vue'
import TodoInput from './components/TodoInput/TodoInput.vue'
import TodoButton from './components/TodoButton/TodoButton.vue'
  export default {
    name: 'MyApp',
    data() {
      return {
        // 任务列表的数据
        todoList: [
          { id: 1, task: '周一上午九点开会', done: false },
          { id: 2, task: '周二晚上九点聚餐', done: false },
          { id: 3, task: '周三汇报工作报告', done: true }
        ],
        nextId: 4,
        activeBtnIndex: 0
      }
    },
    components: {
      TodoList,
      TodoInput,
      TodoButton
    },
    methods: {
      onAddNewTask(taskName) {
        console.log('触发了addTask')
        this.todoList.push({ id: this.nextId, task: taskName, done: false })
        this.nextId++
      }
    },
    computed: {
      taskList() {
        switch(this.activeBtnIndex) {
          case 0:
            return this.todoList
          case 1:
            return this.todoList.filter(x=>x.done)
          case 2:
            return this.todoList.filter(x=>!x.done)
        }
       

      }
    }
  }
</script>
<style lang="less" scoped>

</style>

